<template>
  <div v-if="isLogin" class="h-full w-full"><slot></slot></div>
  <div v-else class="flex h-full flex-col">
    <div>
      <Header />
    </div>
    <div :class="['flex-1 flex mx-auto w-1200px', { 'overflow-hidden': hiddenOverflow }]">
      <div
        :class="['nav mr-12px', { 'overflow-auto scrollbar-none': hiddenOverflow }]"
        v-if="showNav"
      >
        <div
          :class="['use', 'item', currentRouteNo === o.no ? 'active' : '']"
          v-for="o in navMenu"
          :key="o.no"
          @click="handleSelect(o)"
        >
          <div class="icon">
            <img :src="currentRouteNo === o.no ? o.icon2 : o.icon1" alt="" />
          </div>
          <div class="title">{{ o.title }}</div>
        </div>
      </div>

      <div class="flex-1 h-full overflow-x-hidden">
        <slot></slot>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { useRoute, useRouter } from 'vue-router';

  import Header from './header.vue';
  import { computed } from 'vue';
  import { useLayoutStore } from './useLayoutStore';
  import { storeToRefs } from 'pinia';
  import { navMenu } from './menu-config';

  const { currentRouteNo } = storeToRefs(useLayoutStore());

  const { changeRouteNo } = useLayoutStore();

  const route = useRoute();
  const router = useRouter();

  const showNav = computed(() => {
    return !!route.meta?.showNav;
  });

  const hiddenOverflow = computed(() => {
    return !!route.meta?.hiddenOverflow;
  });

  const isLogin = computed(() => {
    return route.path.includes('/login');
  });

  function handleSelect(item) {
    changeRouteNo(item.no);
    if (item?.path || item?.children?.length) {
      router.push(item.path || '/dashboard');
    }
  }
</script>

<style lang="less" scoped>
  .nav {
    display: flex;
    flex-direction: column;
    width: 80px;
    height: 100%;
    padding: 36px 0;
    background-color: #fff;
    cursor: pointer;

    .active {
      border-radius: 8px;
      background: linear-gradient(129deg, #f8b1c3 0%, #ef9bb1 100%);

      .title {
        color: #fff !important;
      }
    }

    .item {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 16px 0;

      .icon {
        padding: 2px;
      }

      img {
        width: 24px;
        height: 24px;
      }

      .title {
        margin-top: 4px;
        color: #091f3d;
        font-size: 13px;
      }
    }
  }
</style>
